<template>
    <div class="companyOperations-box">
        <div class="companyOperations-table">
            <el-table :border="props.border" :data="tableData" style="width: 100%;"
                :max-height="tableHeight" :height="props.height"
                :header-cell-style="{ 'color': `${color}`, 'background': `${bg} !important` }"
               
                :style="{ border: `1px solid ${borderColor}`, borderColor: `${borderColor}` }">
                <!-- 表格数据 -->
                <el-table-column :prop="item.prop" :fixed="item.fixed" :min-width="item.minwidth" :max-width="item.maxwidth"
                    :width="item.width" :label="item.label" :class-name="item.colorClassName" 
                    v-for="item in tableHeaderData" :align="'center'" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-model="scope.row[item.prop]" :disabled="props.disabled" />
                    </template>
                </el-table-column>

                <el-table-column label="操作" show-overflow-tooltip class-name="operate" :align="'center'" v-if="props.operate" >
                    <template #default="scope">
                        <p @click="handleSave(scope.$index, scope.row)" style="margin-right: 5px; cursor: pointer; color: #ff9d1c;" v-show="customerTableSave" >保存</p>
                        <p @click="handleDetail(scope.$index, scope.row)" style="cursor: pointer; color: #1C49FF;">删除</p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, defineEmits, defineProps } from 'vue'
let emit = defineEmits(['handleDelete','classifyFlag'])
// 表格高度
let tableHeight = ref(800)

// 传递的参数
const props = defineProps({
    // 字体颜色
    color: {
        type: String,
        default: '#333'
    },
    // 表格表头背景颜色
    bg: {
        type: String,
        default: '#fff'
    },
    // 显示操作栏
    operate: {
        type: Boolean,
        default: false
    },
    // 显示操作栏
    warn: {
        type: Boolean,
        default: true
    },
    // 表格表头
    tableHeaderData: {
        type: Array,
        default: []
    },
    // 表格内容
    tableData: {
        type: Array,
        default: []
    },
    // 边框
    border: {
        type: Boolean,
        default: true
    },
    // 边框颜色
    borderColor: {
        type: String,
        default: '#1947FF'
    },
    // 高度
    height: {
        type: String,
        default: null
    },
    // 是否禁用
    disabled:{
        type: Boolean,
        default: false
    },
    // 是否显示i保存
    customerTableSave:{
        type: Boolean,
        default: false
    }
})

// 删除
const handleDetail = (i, v) => {
    emit('handleDelete', { i, v })
}
// 保存
const handleSave = (i, v)=>{
    emit('handleSave', { i, v })
}

</script>
<style scoped lang='scss'>

.companyOperations-box {
    box-sizing: border-box;
    height: 100%;

    :deep(.el-date-editor) {
        width: 120px;
    }

    :deep(.el-input) {
        width: 120px;
    }

    :deep(.activeColor) {
        color: #1C49FF;
    }

    :deep(.el-table--border .el-table__cell) {
        border-right: 1px solid #1947FF;
    }

    :deep(.operate) {
        .cell {
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .icon-xiugai,
            .icon-xiangqing {
                color: #1947FF;
            }

            .icon-shanchu1 {
                color: #FB3535;
            }
        }
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
    .addressInput {
        .el-input {
            width: 220px;
        }
    }

    .companyOperations-header {
        margin: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .sift {
            display: flex;
            align-items: center;
            color: #7386D1;
            margin-right: 20px;
            cursor: pointer;

            .iconfont {
                font-size: 20px;
            }
        }

        .siftData {
            cursor: pointer;
            line-height: 25px;

            p {
                text-align: center;
            }

            .activeTime {
                color: #1947FF;
            }
        }


    }

    .pageNum {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}</style>
